import React, {useEffect} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
      width: '10ch',
    },
  },
}));



export default function Input2(props) {
  const classes = useStyles();

  const onChange = () => {
  let inputElement = document.getElementById(props.id);
  let string = inputElement.value;
  string = string.replaceAll(/\s/g, "");
  string = string.replaceAll(/\d{3}/g, "");
  string = string.replaceAll(/,/g, "");
  string = string.replaceAll(/[^0-9,\s]/g, "");
  inputElement.value = string;
}
  return (
      <div className={classes.root}>
        <TextField id={props.id} label={props.label} variant="standard"
                 InputLabelProps={{ shrink: true }} placeholder={"example:2"}
                 onChange={onChange}
      >
      </TextField>
      </div>

  );
}
